import React, { Component } from 'react';
import 'antd/dist/antd.css'
import ToDoListUi from './ToDoListUi';
import store from '../store';
import {changeInputAction,addItemAction , delItemAction, getListAction} from '../store/actionCreatores'
import axios from 'axios';

class ToDoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
        this.changeInputValue = this.changeInputValue.bind(this)
        this.clickBut = this.clickBut.bind(this)
        this.deleteItem = this.deleteItem.bind(this)
        //订阅
        this.storeChange = this.storeChange.bind(this)
        store.subscribe(this.storeChange)
        console.log(store.getState())

    }
    render() { 
        return ( 
            <ToDoListUi
                changeInputValue ={this.changeInputValue}
                clickBut = {this.clickBut}
                deleteItem = {this.deleteItem}
                list = {this.state.list}
                inputValue = {this.state.inputValue}
            />
         );
    }
    componentDidMount(){
        axios.get('http://rap2api.taobao.org/app/mock/292931/index')
            .then((res)=>{
                console.log(res)
                const data = res.data.list
                const action = getListAction(data)
                store.dispatch(action)
            })
            .catch(error=>{console.log('error' + error)})
    }

    changeInputValue(e){
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }
    storeChange(){
        this.setState(store.getState())
    }
    //提交
    clickBut(){
        const action = addItemAction()
        store.dispatch(action)
    }
    //删除
    deleteItem(index){
        const action = delItemAction(index)
        store.dispatch(action)
    }
}
 
export default ToDoList;